<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.sid" class="filter-item" style="width: 130px;" filterable clearable :loading="loading" placeholder="选择区服">
        <el-option
          v-for="item in serverList"
          :key="item.sid"
          :label="item.name+'('+item.sid+')'"
          :value="item.sid"
        >
        </el-option>
      </el-select>
      <!-- <el-select v-model="listQuery.showType" class="filter-item" style="width: 80px;" filterable clearable :loading="loading" placeholder="选择" @change="display_other_fields">
        <el-option
          v-for="item in showTypeList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select> -->
      <template v-if="is_log">
        <el-date-picker
          v-model="listQuery.logDt[0]"
          class="filter-item"
          type="date"
          style="width: 140px;"
          placeholder="记录时间"
        ></el-date-picker>-
        <el-date-picker
          v-model="listQuery.logDt[1]"
          class="filter-item"
          type="date"
          style="width: 140px;"
          placeholder="记录时间"
        ></el-date-picker>
      </template>
      <el-select v-if="is_log" v-model="listQuery.active" class="filter-item" style="width: 130px;" filterable clearable :loading="loading" placeholder="活跃状态">
        <el-option label="全部" value=""></el-option>
        <el-option label="活跃" value="active"></el-option>
      </el-select>
      <el-input v-model="listQuery.actor" class="filter-item" style="width: 150px;" placeholder="账号/角色ID/角色名" />
      <template v-if="!is_log">
        <el-input v-model="listQuery.level[0]" class="filter-item" style="width: 60px;" placeholder="等级" />-
        <el-input v-model="listQuery.level[1]" class="filter-item" style="width: 60px;" placeholder="等级" />
        <el-input v-model="listQuery.recharge[0]" class="filter-item" style="width: 70px;" placeholder="充值" />-
        <el-input v-model="listQuery.recharge[1]" class="filter-item" style="width: 70px;" placeholder="充值" />
        <el-input v-model="listQuery.vip[0]" class="filter-item" style="width: 60px;" placeholder="VIP" />-
        <el-input v-model="listQuery.vip[1]" class="filter-item" style="width: 60px;" placeholder="VIP" />
        <el-date-picker v-model="listQuery.createtime[0]" class="filter-item" type="date" style="width: 140px;" placeholder="创角时间"></el-date-picker>-
        <el-date-picker v-model="listQuery.createtime[1]" class="filter-item" type="date" style="width: 140px;" placeholder="创角时间"></el-date-picker>
        <el-date-picker v-model="listQuery.lasttime[0]" class="filter-item" type="date" style="width: 140px;" placeholder="登录或离线时间"></el-date-picker>-
        <el-date-picker v-model="listQuery.lasttime[1]" class="filter-item" type="date" style="width: 140px;" placeholder="登录或离线时间"></el-date-picker>
      </template>
      <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button :loading="downloadLoading" type="primary" icon="el-icon-download" class="filter-item" @click="handleDownload()">导出</el-button>
    </div>
    <div class="" style="max-height: 735px;overflow-y: auto;">
      <el-table ref="table" v-loading="listLoading" :data="list" stripe border class="table-content" height="735px" @sort-change="sortchange">
        <el-table-column v-for="(column, index) in allColumns" :key="index" :prop="column.prop" :label="column.label" :width="column.width || '70'" :align="column.align || 'center'" :fixed="column.fixed || false" :sortable="column.sortable || false">
          <template slot-scope="{ row }">
            <span v-if="column.formatter">{{ column.formatter(row) }}</span>
            <el-tag v-else-if="column.tag=='el-tag' && column.prop=='status'" :type="row.status | statusTagFilter">{{ row.status | statusFilter }}</el-tag>
            <el-tag v-else-if="column.tag=='el-tag' && column.prop=='is_online'" :type="row.is_online === 1 ? 'success' : 'danger'">{{ row.is_online === 1 ? '在线' : '离线' }}</el-tag>
            <div v-else-if="column.render" v-html="getRenderedContent(column.render, scope)"></div>
            <span v-else>{{ row[column.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import { getActorList } from '@/api/actorInfo'
import { getServerList } from '@/api/ops'
import { getOftenGroupConfigByGroup } from '@/api/config'
import { deepClone } from '@/utils/index'
import actorInfoFields from '@/utils/actor'
import actorHandleMixin from '@/utils/actor_filter'
export default {
  name: 'ActorList',
  components: { Pagination },
  mixins: [actorHandleMixin],
  directives: { waves },
  props: {
    listType: { type: String, default: 'all' }
  },
  data() {
    return {
      list: [],
      dlist: [],
      serverList: [],
      oftenConfigList: [],
      total: 0,
      loading: false,
      listLoading: false,
      downloadLoading: false,
      showTypeList: [{ id: 0, name: '常规' }, { id: 1, name: '全部' }],
      visable_other_fields: false,
      listQuery: {
        page: 1,
        limit: 200,
        sortName: '',
        logDt: [],
        sid: '',
        actor: '',
        createtime: [],
        level: [],
        recharge: [],
        vip: [],
        lasttime: [],
        sortType: '',
        showType: 0,
        active: ''
      },
      exportList: []
    }
  },
  computed: {
    is_log() {
      return this.listType === 'actor-log' ? 1 : 0
    },
    allColumns() {
      return actorInfoFields(this.is_log, this.visable_other_fields)
    },
    tHeader() {
      return this.allColumns.map((column) => column.label)
    },
    filterVal() {
      return this.allColumns.map((column) => column.prop)
    }
  },
  watch: {
    is_log(v) {
      console.log('is_log:' + v)
    }
  },
  created() {
    this.getServerList()
    this.getOftenGroupConfigByGroup({ pid: 2, group: 1 })
    const id = parseInt(this.$route.params.id)
    const sid = parseInt(this.$route.params.sid)
    if (Number.isFinite(id) && Number.isFinite(sid)) {
      this.listQuery.actor = id
      this.listQuery.sid = sid
      this.getList()
    }
    console.log(this.listType)
  },
  methods: {
    getRenderedContent(renderFn, row) {
      const h = this.$createElement
      const vnode = renderFn(h, { row })
      return vnode?.elm?.outerHTML || ''
    },
    display_other_fields(row) {
      // this.visable_other_fields2 = row === 1
      // console.log(this.visable_other_fields2)
    },
    handleSortChange({ column, prop, order }) {
      console.log('排序')
      console.log(column, prop, order)
    },
    queryParams(data) {
      const query = this.listQuery
      if (this.is_log && query.sortName === '') {
        query.sortName = 'log_date'
        query.sortType = 'desc'
      }
      return Object.assign({}, query, { is_log: this.is_log }, data)
    },
    async getList() {
      const query = this.listQuery
      console.log(query)
      this.listLoading = true
      const res = await getActorList(this.queryParams())
      if (query.showType === 1) {
        this.visable_other_fields = true
      }
      this.listLoading = false
      this.list = res.data.items
      this.total = res.data.total
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
      // console.log(deepClone(this.allColumns))
    },
    handleFilter(query) {
      this.searchBarQuery = query
      this.getList()
    },
    async getServerList(params) {
      const query = params
      const res = await getServerList(query)
      this.serverList = res.data.items
      this.loading = false
    },
    async getOftenGroupConfigByGroup(params) {
      const query = params
      const res = await getOftenGroupConfigByGroup(query)
      const oftenConfigList = res.data
      for (let i = 0; i < oftenConfigList.length; i++) {
        this.oftenConfigList[oftenConfigList[i]['type']] = oftenConfigList[i]['group_name']
        // this.otherData.push({ 'label': oftenConfigList[i]['group_name'], 'prop': 'building_' + oftenConfigList[i]['type'], width: '', align: 'center' })
      }
      this.loading = false
    },
    sortchange(column) {
      this.listQuery.sortName = column.prop
      this.sortBy(column.order)
    },
    sortBy(order) {
      if (order === 'ascending') {
        this.listQuery.sortType = 'asc'
      } else {
        this.listQuery.sortType = 'desc'
      }
      this.getList()
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = this.tHeader
        const filterVal = this.filterVal
        console.log(tHeader)
        getActorList(this.queryParams({ export: 1 })).then(response => {
          this.dlist = response.data.items
          const data = this.dlist.map(v => filterVal.map(j => {
            return v[j]
          }))
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: this.is_log ? '每日数据' : '角色列表'
          })
          this.downloadLoading = false
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .filter-container .filter-item {
    margin-bottom: 0px;
  }

  .filter-container {
    margin-bottom: 10px;
  }
</style>
